<template>
  <div class="container">
    <el-card class="box-card">
      <el-row :column="4" style="width: 100%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-col :span="6">
            <el-form-item label="关键字" >
              <el-input
                size="small"
                v-model="form.value"
                placeholder="根据编号搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6"></el-col>
          <el-col :span="6"></el-col>
          <el-col :span="6">
            <el-form-item style="float: right">
              <div class="button">
                <el-button size="mini" @click="onClear">清除</el-button>
                <el-button type="primary" size="mini" @click="onSearch(form.value)"
                  >搜索</el-button
                >
              </div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false">
      </el-alert>
      <!-- 表格区 -->
      <el-table
        :data="questionData"
        style="width: 100%;margin-top:20px"
        v-loading="loading"
        element-loading-text="给我一点时间"
         highlight-current-row
        :header-cell-style="{ background: '#FAFAFA' }"
      >
        <el-table-column prop="id" label="编号" width="200"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template slot-scope="{row}">
            {{row.questionType === "1"? "简答":row.questionType === "2"? "单选":"多选"}}
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="200">
          <template slot-scope="{ row }">
            <div v-for="(item, index) in row.questionIDs" :key="index">
              <el-link type="primary" @click="showQuestionPriview(item)">{{
                item.number
              }}</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" > </el-table-column>
        <el-table-column prop="totalSeconds" label="回答时间(s)" >
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率" width="200">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column prop="userName" label="操作" >
          <template slot-scope="{ row }">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="onDelete(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="query.pagesize"
          :total="total"
          layout="sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹层区 -->
    <subject-preview v-model="subjectShow" :subjectId="subjectId" />
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import subjectPreview from '@/components/subjectPreview'
export default {
  components: { subjectPreview },
  data () {
    return {
      form: {
        value: ''
      },
      query: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      delText: {
        id: ''
      },
      subjectShow: false,
      subjectId: '',
      questionData: [],
      selectData: [],
      questionPriviewVisible: false,
      text: '',
      total: 0,
      loading: true
    }
  },
  created () {
    this.loadingRandomQuestions()
  },
  methods: {
    handleSizeChange (val) {
      this.query.pagesize = val
      this.loadingRandomQuestions(this.query)
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.loadingRandomQuestions(this.query)
    },
    async loadingRandomQuestions () {
      const res = await randoms(this.query)
      this.total = res.data.counts
      this.questionData = res.data.items
      // switch (this.questionData.questionType) {
      //   case '1': this.questionData.questionType = '简单'; break
      //   case '2': this.questionData.questionType = '单选'; break
      //   case '3': this.questionData.questionType = '多选'; break
      //   default:this.questionData.questionType = '未知'; break
      // }
      console.log(this.questionData)
      this.loading = false
    },
    showQuestionPriview (item) {
      this.subjectShow = true
      this.subjectId = item.id
    },
    onClear () {
      this.form.value = ''
    },
    onSearch (val) {
      if (val === '') {
        this.loadingRandomQuestions()
      } else {
        this.questionData.forEach((item) => {
          if (item.id.indexOf(val) !== -1) {
            this.selectData.push(item)
          }
        })
        this.questionData = this.selectData
        console.log(this.questionData)
        this.total = this.questionData.length
        this.selectData = []
      }
    },
    onDelete (row) {
      this.delText.id = row.id
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (this.questionData.length === 1 && this.query.page !== 1) {
            this.query.page--
          }
          await removeRandoms(this.delText)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.loadingRandomQuestions()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 0 10px;
  margin: 10px 0;
}
.el-form {
  display: flex;
}

.el-input__inner {
  width: 211.5px;
  height: 30px;
}
.el-pagination {
  float: right;
  margin: 20px;
}
/deep/.el-form-item__label{
  text-align: left;
}
</style>
